<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="rolePage">
        <el-row>
          <el-col :sm="11">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item"
              @change="fetchData()"
            />
          </el-col>
          <el-col :sm="13" style="text-align: left">
            <div class="title">成本统计</div>
          </el-col>
        </el-row>

      </div>
    </div>
    <el-row v-if="list.motionDate.length > 0" class="table">
      <table style="width: 100%" border="0" cellspacing="0">
        <thead>
          <tr>
            <th id="lineTd">
              <span style="float:left;margin-top:20px;">类别</span>
              <span style="float:right;margin-top:3px;">日期</span>
            </th>
            <th v-for="(item, index) in list.motionDate" :key="index">{{ item }}</th>
            <th rowspan="2">单瓦成本目标</th>
            <th rowspan="2">单瓦成本</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>每日投入</td>
            <td v-for="(item, index) in list.dayInput" v-if="item" :key="index">{{ item }}</td>
            <td v-for="(item, index) in list.dayInput" v-if="!item" :key="index" />
          </tr>
          <tr>
            <td>每日入库</td>
            <td v-for="(item, index) in list.dayStorage" v-if="item" :key="index">{{ item }}</td>
            <td v-for="(item, index) in list.dayInput" v-if="!item" :key="index" />
          </tr>
          <tr>
            <td>损耗物料费用</td>
            <td v-for="(item, index) in list.lostMaterialsCost" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>运营部工资</td>
            <td v-for="(item, index) in list.depSalary" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>水电费用</td>
            <td v-for="(item, index) in list.utilityBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>设备折旧费用</td>
            <td v-for="(item, index) in list.eqDepreciation" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>设备备品备件</td>
            <td v-for="(item, index) in list.eqSpareBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>厂务备品备件</td>
            <td v-for="(item, index) in list.facSpareBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>劳保五金费用</td>
            <td v-for="(item, index) in list.laborBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>招待费用</td>
            <td v-for="(item, index) in list.invitBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>每日合计费用</td>
            <td v-for="(item, index) in list.dayTotalBills" v-if="item" :key="index">{{ item }}</td>
          </tr>
          <tr>
            <td>单瓦成本</td>
            <td v-for="(item, index) in list.singleCosts" v-if="item" :key="index">{{ item }}</td>
            <td v-for="(item, index) in list.singleCosts" v-if="!item" :key="index" />
          </tr>
          <tr>
            <td>投入计算单瓦成本</td>
            <td v-for="(item, index) in list.inputCosts" v-if="item" :key="index">{{ item }}</td>
            <td v-for="(item, index) in list.inputCosts" v-if="!item" :key="index" />
          </tr>
        </tbody>
      </table>
    </el-row>

  </div>
</template>
<script>
import './css/index.scss'
import { costsReport } from '@/api/report'
import LineChart from './components/motionChart'
export default {
  components: {
    LineChart
  },
  data: function() {
    return {
      activeCardName: 'all',
      dialogFormVisible: false,
      dialogSee: false,
      list: {
        motionDate: [],
        motionGoal: [],
        line1: [],
        line2: [],
        line3: [],
        line4: []
      },
      dateRange: []
    }
  },
  created() {
    // 获取数据
    // this.fetchData();
  },
  methods: {
    async fetchData() {
      const params = {
        pageNum: 1,
        pageSize: 100,

        starTime: '',
        endTime: ''
      }
      if (this.dateRange) {
        const start = this.getTime(this.dateRange[0])
        const end = this.getTime(this.dateRange[1])
        params.starTime = start
        params.endTime = end
      }
      const data = await costsReport(params)
      this.list = this.formatDate(data.data)
      console.log('list', this.list)
    },
    formatDate(data) {
      const list = {
        motionDate: [],
        dayInput: [],
        dayStorage: [],
        lostMaterialsCost: [],
        depSalary: [],
        utilityBills: [],
        eqDepreciation: [],
        eqSpareBills: [],
        facSpareBills: [],
        laborBills: [],
        invitBills: [],
        dayTotalBills: [],
        singleCosts: [],
        inputCosts: []
      }
      data.forEach((item, index) => {
        // new Number(item.originalLoss1).toFixed(2)
        item.forEach(item2 => {
          if (item2.costsId == 0 && item2.costsDate == null && index == 0) {
            list.motionDate.push('汇总')
          } else {
            if (index == 0) {
              list.motionDate.push(item2.costsDate)
            }
          }
          if (item2.dayInput == null) {
            list.dayInput.push(false)
          } else {
            list.dayInput.push(item2.dayInput)
          }
          if (item2.dayStorage == null) {
            list.dayStorage.push(false)
          } else {
            list.dayStorage.push(item2.dayStorage)
          }
          list.lostMaterialsCost.push(item2.lostMaterialsCost)
          list.depSalary.push(item2.depSalary)
          list.utilityBills.push(item2.utilityBills)
          list.eqDepreciation.push(item2.eqDepreciation)
          list.eqSpareBills.push(item2.eqSpareBills)
          list.facSpareBills.push(item2.facSpareBills)
          list.laborBills.push(item2.laborBills)
          list.invitBills.push(item2.invitBills)
          list.dayTotalBills.push(item2.dayTotalBills)
          if (item2.singleCosts == null) {
            list.singleCosts.push(false)
          } else {
            list.singleCosts.push(item2.singleCosts)
          }
          if (item2.inputCosts == null) {
            list.inputCosts.push(false)
          } else {
            list.inputCosts.push(item2.inputCosts)
          }
        })
      })
      return list
    },
    getTime(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style lang="scss" scoped>
.userlist {
    margin-right: 10px;
}

#lineTd {
    background: #fff url() no-repeat 100% center;
}

.title {
    height: 20px;
    padding-left: 5px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 23px;
    display: inline-block;
}

// table
.hidden {
    display: none;
}

table {
    border-collapse: separate;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
}

thead tr th {
    background-color: #f8f8f9;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}

tbody tr td {
    padding: 6px;
    text-align: center;
    height: 34px; //设置单元格最小高度
    border-bottom: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}
</style>
